<template>
    <div class="content">
        <el-container>
            <el-aside width="150px">
                <el-menu default-active="Material" @select="onSelect">
                    <el-menu-item index="Material">
                        <span>主料采购清单</span>
                    </el-menu-item>
                    <el-menu-item index="Contrast">
                        <span>询价比价方案结果</span>
                    </el-menu-item>
                    <el-menu-item index="Contract">
                        <span>签订材料采购合同</span>
                    </el-menu-item>
                    <el-menu-item index="PayApply">
                        <span>提交材料付款申请</span>
                    </el-menu-item>
                    <el-menu-item index="Template">
                        <span>材料采购合同模板</span>
                    </el-menu-item>
                    <el-menu-item index="Auth">
                        <span>授权委托书</span>
                    </el-menu-item>
                    <el-menu-item index="Clearing">
                        <span>清账承诺书</span>
                    </el-menu-item>
                    <el-menu-item index="Inform">
                        <span>告知函</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <component :is="Material" v-if="value == 'Material'" />
                <component :is="Contrast" v-if="value == 'Contrast'" />
                <component :is="Contract" v-if="value == 'Contract'" />
                <component :is="PayApply" v-if="value == 'PayApply'" />
                <component :is="Template" v-if="value == 'Template'" />
                <component :is="Clearing" v-if="value == 'Clearing'" />
                <component :is="Auth" v-if="value == 'Auth'" />
                <component :is="Inform" v-if="value == 'Inform'" />
            </el-main>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Material from '../../material/index.vue';
import Contrast from '../../material/contrast.vue';
import Contract from '../../material/contract.vue';
import PayApply from '../../material/payApply.vue';
import Template from '../../material/materialTemplate.vue';
import Auth from '../../material/materialAuth.vue';
import Clearing from '../../material/materialClearing.vue';
import Inform from '../../material/materialInform.vue';
const value = ref('Material')
const onSelect = (data: any) => {
    value.value = data
}
</script>

<style scoped>

</style>